<script setup>
import {useRouter} from "vue-router";
import { ref } from "vue"
import {getvercode, loginApi} from "../../api/user";
const phone = ref('')
const vercode = ref('')
const router = useRouter();
const verCodeStatus = ref(true)
let gotoBack = () => {
  router.go(-1)
}
let verCodeText = ref('发送验证码')
let loginStatus = ref(false)
let logoimg = new URL('../../assets/img/logo.png', import.meta.url).href ;

function setcache(token){
  console.log(token)
  window.localStorage.setItem('token',token)

}
let vercodeInfo = ref(
    {
      status:0,
      data:null,
      msg:""
    }
)
let vercodeReqData = ref({
  type:"1",
  mobile:'',
  imgKey:"",
  imgCode:""}
)

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function get_vercode() {

  vercodeReqData.value.mobile = phone.value
  if (phone.value === ''){
    showToast('请输入手机号')
  }else{
  if(verCodeStatus.value){
    console.log('fas')
    let res = await getvercode(vercodeReqData.value)
    vercodeInfo.value = res.data
    if (vercodeInfo.value.msg==='ok'){
      showToast('发送成功');
      verCodeStatus.value = false
      // 设置一个定时器，
      for (let  i = 59; i >= 0; i--){
        verCodeText.value = `${i}秒`
        if (i<=0){
          verCodeText.value = '发送验证码'
          verCodeStatus.value = true
        }
        await sleep(1000);
      }
    }
  }
  }
}

let loginResData = ref({
  mobile:'',
  smsCode:'',
  imgKey:"",
  imgCode:"",
  extra:{

  }
}
)
let loginReqData = ref({

})
async function login() {
  if (phone.value && vercode.value){
    loginResData.value.mobile = phone.value
    loginResData.value.smsCode = vercode.value
    let res = await loginApi(loginResData.value)
    let loginStatus = res.data.status
    loginReqData.value = res.data.data
    if (loginStatus ===0){
      setcache(res.data.data.token)
      await sleep(500);
      gotoBack()
    }
  }else{
    if(!phone.value){
      showToast('请输入手机号');
    }else if (!vercode.value){
      showToast('请输入验证码');
    }

  }



}



</script>

<template>
  <div class="login-box">
    <div class="top-box"></div>
    <div class="login-header">
      <van-nav-bar   @click-left="gotoBack">
        <template #left>
          <van-icon name="arrow-left" size="20" color="#6f7070" />
          <van-icon name="left-text" size="20" color="#6f7070" />
        </template>
      </van-nav-bar>
    </div>
    <div class="login-content">
      <img style="width: 60px;height: 60px;padding-top: 50px;margin-bottom: 30px" :src="logoimg"/>
      <van-cell-group style="width: 90%;margin-bottom: 30px" inset>
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field v-model="phone" type="tel" placeholder="手机号"  >
          <template #button>
            <span @click="get_vercode()">{{ verCodeText }}</span>
<!--            <van-button size="small" type="primary">发送验证码</van-button>-->
          </template>
        </van-field>
        <!-- 输入密码 -->
        <van-field v-model="vercode" type="tel" placeholder="验证码" >
        </van-field>
      </van-cell-group>
      <van-button class="quit-btn" color="#ff5f16" @click="login()"  square>
        短信登录
      </van-button>

    </div>
  </div>

</template>


<style scoped>

:root{
  --van-field-placeholder-text-color:#838485;
}
.login-box{
  display:flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  /*padding-top: env(safe-area-inset-top);*/
}
.top-box{
  width: 100%;
  height: 30px;
  background-color: #fff;
}
.login-header {
  position: fixed;
  top: 30px;
  left: 0;
  width: 100%;
  background-color: #fff;
  /*padding: 10px;*/
  /*box-shadow: 0 1px 1px rgba(0,0,0,0.2);*/
  z-index: 10;
}
.login-content{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  background-color: #fff;
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-size: cover; /* 背景图片覆盖整个容器 */
}
.quit-btn{
  /*position: fixed;*/
  /*bottom: 0;*/
  /*left: 0;*/
  border-radius: 5px;
  height: 40px;
  width: 90%;
  font-size: 16px;
  line-height: 60px;
  color:#ff5f16;
}
</style>